<!-- OrderPayment -->
<template>
  <v-layout wrap row justify-center class="pa-5">
    <v-flex xs12>
      <v-card>
        <v-card-title>
          <p> <v-icon color="green">check_circle</v-icon> 订单提交成功，请尽快付款！订单号：<span class="primary--text">{{itemData.order_sn}}</span></p>
        </v-card-title>
        <v-card-text class="pl-5">
          <p>订单金额：<span class="red--text">¥{{itemData.amount}}</span></p>
          <p>收获地址：xxxxxxxxx</p>
          <span class="grey--text">请您在<span class="red--text">24小时</span>内完成支付，否则订单会被自动取消。</span>
          <router-link :to="{ name: 'MemberOrderList'}">取消支付</router-link>
        </v-card-text>
      </v-card>
    </v-flex>
    <v-flex xs4 class="pa-5">
      <v-hover>
        <v-img @click="requestPayment('alipay')" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`" src="/statics/img/ali_pay.png"></v-img>
      </v-hover>
      <v-btn @click="requestPayment('alipay')" block style="background-color:#099EE7" dark>支付宝支付</v-btn>
    </v-flex>
    <v-flex xs4 class="pa-5">
      <v-hover>
        <v-img @click="requestPayment('wechatpay')" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`" src="/statics/img/wechat_pay.png"></v-img>
      </v-hover>
      <v-btn @click="requestPayment('wechatpay')" block style="background-color:#0AA648" dark>微信支付</v-btn>
    </v-flex>
    <v-flex xs12 class="text-xs-center">
      <!-- <v-btn color="primary" large class="my-4" @click="onBtnPaymentComplete">支付完成</v-btn> -->
    </v-flex>
  </v-layout>
</template>

<script>
import { fetchByOrderSn } from '@/api/shop/order.js'
// import Config from '@/../config/index'
export default {
  name: 'OrderPayment',
  data: function () {
    return {
      itemData: {}
    }
  },
  created: function () {
    this.fetchOrderData().then(status => {
      if (status === 'paid') {
        alert('订单已支付！')
        this.$router.push({ name: 'MemberOrderDetail' })
      }
    })
  },
  mounted: function () {
  },
  components: {},
  computed: {
    orderSn: function () {
      return this.$route.query.order_sn
    }
  },
  methods: {
    fetchOrderData: function () {
      return new Promise((resolve, reject) => {
        fetchByOrderSn(this.$route.query.order_sn).then(res => {
          this.itemData = res.data
          resolve(res.data.status)
        })
      })
    },
    onBtnPaymentComplete: function () {
      this.$router.push({ name: 'OrderSuccess' })
    },
    requestPayment: function (type) {
      // window.open(Config.apiURl + '/index/Payment/request?type=' + type + '&order_sn=' + this.itemData.order_sn)
    }
  }
}
</script>
<style scoped>
</style>
